<template>
  <div class="login flex">
    <div class="loginFrom">
      <div class="loginLogo"><img src="../../assets//images/logo.png" /></div>
      <el-form :model="form" label-width="120px" :hide-required-asterisk="true">
        <el-form-item label-width="auto" required>
          <template #label>
            <el-icon color="#fff" size="30"><User /></el-icon>
          </template>
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label-width="auto">
          <template #label>
            <el-icon color="#fff" size="30"><Lock /></el-icon>
          </template>
          <el-input v-model="form.password" placeholder="请输入密码" type="password" show-password />
        </el-form-item>

        <el-form-item class="loginButton">
          <el-button size="default" class="w-full" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UserAccount } from './types';

import { userStore } from '@/store/modules/login';
import router from '@/router';

const userTbStore = userStore();
const form = ref<UserAccount>({
  username: 'admin',
  password: '123456',
});
const onSubmit = () => {
  userTbStore.handelLogin(form.value).then(() => {
    router.replace('/');
  });
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/loginBackground.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  .loginLogo {
    margin-bottom: 2vh;
  }
  .loginFrom {
    background-color: #1f1a1d80;
  }
  .loginButton {
    :deep(.el-form-item__content) {
      margin-left: 0 !important;
    }
  }
}
</style>
